<template>
  <div class="user-info">
    <ul>
      <li>姓名:<span>{{userStore.userInfo.name}}</span></li>
      <li>性别:<span>{{sex}}</span></li>
      <li>年龄:<span>{{userStore.doubleAge}}</span></li>
    </ul>
  </div>
</template>

<script setup>

import {useUserStore} from '@/store/user.js'
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
const userStore=useUserStore()
const sex=computed(()=>
  userStore.userInfo.sex
)
const {userInfo} =storeToRefs(userStore)

</script>

<style  scoped>
.user-info{
  min-height: 300px;
  background-color: aliceblue;
} 
li{
  font-size: 24px;
  padding: 6px 10px;
  


}
</style>